<template>
	<div id="module-list-new">
	   <div class="mln-header">
        <img v-on:click.stop="hiddenModuleNew" class="logo" :src="backimgUrl">
        <h3>模板选择</h3>
     </div>
     <div class="mln-modellist">
        <ul> 
          <li v-on:click="modelChange(item.id,item.coverimg)" v-for="item in models" :class="[{'checked':(item.choose=='true')}]" :key="item.id">
            <img :src="item.coverimg">
            <span>
              {{item.title}}
            </span>
          </li>
        </ul>
     </div>
     <div class="mln-container">
        <div class="mln-c-header">
           <div class="mln-c-title">
             <span>通用模板</span>
             <span class="radio">分辨率1920*1080</span>
           </div>
           <button v-on:click.stop="newModule">创建大屏</button>
        </div>
        <div class="mln-img">
            <img :src="coverimg">
        </div>
     </div>
	</div>
</template>
<script>
  import './module-new.less'
  import { mapActions } from 'vuex'
  export default {
    name: 'NewModule',
    components: {
      
    },
    data () {
      return {
        models:[
        ],
        modelid:"",
        coverimg:"",
      	backimgUrl:require('@/assets/imgs/5.png')
      }
    },
    mounted:function(){
      this.getModelList()
    },
    methods:{
      ...mapActions([
          'modelLists',
          'addModule'
      ]),
      newModule(){
        var params = {};
        if (!this.modelid) {
          this.$Message.info('模板为空');
          return;
        }
        for (let i = 0; i < this.models.length; i++) {
          if (this.models[i].id == this.modelid) {
            params={
              title: this.models[i].title,
              modelid:this.models[i].id,
              width:this.models[i].width,
              height:this.models[i].height,
              coverimg:this.models[i].coverimg,
              groupid:this.$parent.currentmenuid,
              resizetype:this.models[i].resizetype,
              datas:this.models[i].datas
            }
          }
        }
        this.addModule({params}).then(function(res){
            if (res.code=="1") {
              this.$router.push({ 
                path: 'imgeditor', 
                query: { 
                  id: res.data.id 
                }
              })
              this.$Message.success('创建成功')
            }else{
              this.$Message.info(res.message)
            }
        }.bind(this))
      },
      hiddenModuleNew(){
        this.$parent.hiddenModuleNew();
      },
      getModelList(){
        this.modelLists().then(function(res){
          if (res.code=="1") {
            let data = res.data;
            for (var i = 0; i < data.length; i++) {
              if (i==0) {
                data[i].choose = 'true';
                this.coverimg = data[i].coverimg;
                this.modelid = data[i].id;
              }else{
                data[i].choose = 'false';
              }
            }
            this.models = data;
          }
        }.bind(this))
      },
      modelChange(id,coverimg){
        this.coverimg = coverimg;
        this.modelid= id;
        for (let i = 0; i < this.models.length; i++) {
          if (id==this.models[i].id) {
            this.models[i].choose="true";
          }else{
            this.models[i].choose="false";
          }
        }
      }
    }
  }
</script>
